<template>
  <div class="background">
    <div class="area">
      <div class="top">
        <img src="@/assets/images/logo2.png" class="col-6" alt="" />
        <h1>学员管理系统</h1>
      </div>
      <div class="row">
        <div class="left">
          <img src="@/assets/images/slogan.png" alt="" />
        </div>
        <div class="form-box">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.background {
  background-color: #2b2e3e;
  height: 100vh;
  .area {
    width: 800px;
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    border-radius: 4px;
    .top {
      height: 60px;
      background-color: #2746b1;
      img {
        height: 38px;
        width: 130px;
        margin: 0 20px 6px;
      }
      h1 {
        display: inline-block;
        font-size: 24px;
        margin: 0;
        line-height: 60px;
        color: #d2e2e0;
      }
    }
    .row {
      display: flex;
      .left {
        width: 363px;
        height: 358px;
        overflow: hidden;
        margin: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .form-box {
        box-sizing: border-box;
        flex: 1;
        padding: 20px;
        position: relative;
      }
    }
  }
}
</style>
